<template>
  <div class="ele-body" style="display: flex">
    <MapMarkerContainer ref="map" :data="list"/>
    <div class="data">
      <el-alert v-if="addr" type="success" style="width: 100%; margin-bottom: 12px" @close="closeAddr">
        <div style="color: #0E9AFF;">{{ addr.address }}</div>
      </el-alert>
      <div class="divider">
        <div class="label">查询条件</div>
      </div>
      <el-card class="box-card">
        <el-form :model="search" label-width="77px" class="ele-form-search">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="打标时间:">
                <el-date-picker
                    v-model="search.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 406px">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业类别:">
                <operation-category-select v-model="search.operation_category"></operation-category-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="打标分类:">
                <exception-category-select type="way" v-model="search.exception_category"></exception-category-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div class="divider">
        <div class="label">历史记录</div>
      </div>
      <div id="disease" class="list" v-infinite-scroll="nextPage" :nfinite-scroll-disabled="finished" infinite-scroll-distance="10">
        <el-card v-for="(item, index) in list" :key="index" :class="item.operation_category == 1 ? 'box-card-list danger' : 'box-card-list'">
          <el-descriptions :column="2">
            <el-descriptions-item :span="2" label="标记编号">{{ item.operation_no }}</el-descriptions-item>
            <el-descriptions-item label="作业类别">
              <el-tag
                  :type="['danger', 'success', 'primary'][item.operation_category - 1]"
                  size="mini">
                {{ item.operation_category_name }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="打标分类">{{ item.exception_category_name }}</el-descriptions-item>
            <el-descriptions-item label="打标说明">{{ item.penalty ? '已处罚' : '未处罚' }} | {{ item.description }}</el-descriptions-item>
            <el-descriptions-item label="打标人"> {{ item.create_user }} {{ item.create_time }} </el-descriptions-item>
          </el-descriptions>
          <el-button type="primary" size="mini" @click="showMarker(index)">查看详情</el-button>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import exceptionCategorySelect from './components/exceptionCategorySelect'
import operationCategorySelect from './components/operationCategorySelect'
import MapMarkerContainer from '@/components/Map/MapMarkerContainer'

export default {
  name: 'DiseaseHistory',
  components: {
    exceptionCategorySelect,
    operationCategorySelect,
    MapMarkerContainer
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (typeof to.query.addr != 'undefined') {
        vm.addr = JSON.parse(to.query.addr)
      } else {
        vm.addr = null
      }
      vm.reload()
    })
  },
  data() {
    return {
      search: {
        date: '',
        operation_category: null,
        exception_category: null
      },
      addr: null,
      list: [],
      page: 1,
      pageSize: 10,
      finished: false
    }
  },
  watch: {
    search: {
      handler() {
        this.finished = false
        this.page = 1
        this.list = []
        this.getList()
      },
      deep: true
    }
  },
  methods: {
    reload() {
      this.finished = false
      this.page = 1
      this.list = []
      this.getList()
    },
    nextPage() {
      if (this.finished) {
        return
      }
      this.page ++
      this.getList()
    },
    closeAddr() {
      this.addr = null
      this.reload()
    },
    getList() {
      if (this.search.date) {
        let endDate = new Date(this.search.date[1])
        this.search.date[1] = (new Date(endDate.valueOf() + 86399000)).toISOString()
      }
      if (this.addr) {
        this.search.lnglat = this.addr.lnglat
      } else {
        this.search.lnglat = []
      }
      this.$http
          .post('/disease/getList', Object.assign(this.search, {page: this.page, limit: this.pageSize}))
          .then((res) => {
            if (res.data.code === 0) {
              if (res.data.data.length < this.pageSize) {
                this.finished = true
              }
              for (let i in res.data.data) {
                this.list.push({
                  ...res.data.data[i],
                  lnglats: [Number(res.data.data[i].lng), Number(res.data.data[i].lat)]
                })
              }
              if (this.addr && this.list.length) {
                setTimeout(() => {
                  //this.showMarker(0)
                }, 2000)
              }
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch((e) => {
            this.$message.error(e.message)
          })
    },
    showMarker(index) {
      this.$refs.map.marker(index)
    }
  }
}
</script>

<style>
#disease .el-descriptions__body {
  color: #fff;
  background-color: #041322;
}

#disease .el-descriptions-item__label {
  color: #40AFFF !important;
}

#disease .danger .el-descriptions__body {
  background-color: rgba(255, 77, 77, 0) !important;
}
</style>

<style scoped>
.data {
  width: 560px;
  margin-right: 12px;
  background-color: #041322;
  padding: 12px;
}

.danger {
  border: 1px solid #ff4d4f;
  background-color: rgba(255, 77, 77, 0.15);
}

.divider {
  background-color: #0c243a;
  padding:0 8px;
  color: #46aeff;
  height: 32px;
  width: 100%;
  display: flex;
  align-items: center;
}

.divider .label {
  font-weight: bold;
  height: 20px;
  padding-left: 8px;
  border-left: 6px solid #46aeff;
}
.box-card-list{margin:10px;}
.list {
  height: 520px;
  overflow-y: auto;
}
</style>